<template>
  <Card>
    <div class="md:flex md:mb-5">
      <div class="text-3xl font-semibold" style="color: #4e598c">订阅转化率</div>
    </div>
    <div class="md:flex">
      <div class="md:w-full md:h-1/8 md:mb-5">
        <Card>
          <div class="py-2 px-2 flex justify-between">
            <div class="text-2xl" style="color: gray">总转化率: {{ totalConversionRate }}</div>
          </div>
        </Card>
      </div>
    </div>
    <div class="md:flex">
      <StepAndTimePicker ref="pickerRef" :initData="initStepAndTimeRange" @success="handleSuccess"></StepAndTimePicker>
    </div>
    <div class="md:flex">
      <div :id="barChartName" style="width: 600%; height: 300%"></div>
    </div>
  </Card>
</template>

<script lang="ts" setup>
import { Card } from 'ant-design-vue';
import { ref } from 'vue';
import moment from 'moment';
import * as echarts from 'echarts';
import { ChartProps } from '/@/views/maintenance-center/cloud-service-monitor/Cards/props';
import { ConversionMap, SubConversionRateReq } from '/@/api/operation-center/tenant-opertation/source-analysis/model/sourceAnalysisModel';
import StepAndTimePicker from '/@/views/operation-center/components/StepAndTimePicker.vue';
import { getSubscriptionConversion } from '/@/api/operation-center/tenant-opertation/source-analysis/sourceAnalysis';

const pickerRef = ref();

const barChartName = 'conversion-rate-bar-chart';

var option;

let startDate = moment().add(-9, 'months').format('YYYY-MM-DD HH:mm:ss');

let conversionRateReq: SubConversionRateReq = {
  stepType: 0,
  startTime: startDate,
  endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
  isNeedSumCon: true,
};

const initStepAndTimeRange = conversionRateReq;

let totalConversionRate = ref();

let conversionRateDateListTmp = [];
let conversionRateValueListTmp = [];
let conversionRateKeyValueListTmp = [];

defineProps({
  ...ChartProps,
});

/**
 * 转换后端返回的转化率List of Map
 * @param conversionRateMapList 后端返回的转化率List of Map
 * @param conversionRateKeyValueList 待转换的List of key-value Object
 * @param conversionRateDateList 待转换的日期列表
 * @param conversionRateValueList 待转换的转化率数值列表
 */
function collectConversionRateList(
  conversionRateMapList: ConversionMap[],
  conversionRateKeyValueList: Array<any>,
  conversionRateDateList: Array<any>,
  conversionRateValueList: Array<any>
) {
  for (let i = 0; i < conversionRateMapList.length; i++) {
    let conversionRateMap = conversionRateMapList[i];
    for (let item in conversionRateMap) {
      if (conversionRateMap[item] !== undefined) {
        conversionRateKeyValueList.push({
          date: item,
          value: conversionRateMap[item],
        });
        conversionRateDateList.push(item);
        conversionRateValueList.push(conversionRateMap[item] * 100);
      }
    }
  }
}

const handleSuccess = (params) => {
  let chartDom = document.getElementById(barChartName);

  let myChart = echarts.init(chartDom);
  conversionRateDateListTmp = [];
  conversionRateValueListTmp = [];
  conversionRateKeyValueListTmp = [];

  getSubscriptionConversion(params).then((res) => {
    let conversionRateMapList = res.stepConversion;
    totalConversionRate.value = res.totalConversion * 100 + '%';

    // 处理后端返回的List of Map类型
    collectConversionRateList(conversionRateMapList, conversionRateKeyValueListTmp, conversionRateDateListTmp, conversionRateValueListTmp);

    option = {
      title: {
        text: conversionRateReq.stepType === 0 ? '月均转化率' : '年均转化率',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          label: {
            backgroundColor: '#6a7985',
          },
        },
      },
      grid: {
        top: '20%',
      },
      xAxis: {
        type: 'category',
        data: conversionRateDateListTmp,
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: 100,
      },
      series: [
        {
          data: conversionRateValueListTmp,
          type: 'bar',
          showBackground: true,
          color: '#43AA8B',
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)',
          },
        },
      ],
    };

    option && myChart.setOption(option);
  });
};
</script>
